<template>
  <el-row :gutter="16">
    <el-col v-bind="grid" class="mb-4" v-for="(item, index) in infoList" :key="index">
      <el-card :body-style="{ padding: 0 }">
        <template #header>
          <div class="flex justify-between items-center">
            <span v-text="item.title"></span>
            <el-tag type="success">{{ item.date }}</el-tag>
          </div>
        </template>
        <div class="p-4">
          <div class="number">{{ item.today }}</div>
          <div class="pt-2" style="height: 42px">
            <span>昨日 {{ item.yesterday }}</span>
            <span class="ml-4">
              日环比 {{ Number(item.today_ratio) }}%
              <template v-if="Number(item.today_ratio) >= 0">
                <q-icon name="arrow_upward" color="primary"/>
              </template>
              <template v-else>
                <q-icon name="arrow_downward" color="negative"/>
              </template>
            </span>
          </div>
          <el-divider />
          <div class="total">
            <el-row>
              <el-col :span="12">{{ item.total_name }}</el-col>
              <el-col :span="12" class="text-right">{{ item.total }}</el-col>
            </el-row>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { headerApi } from '@/api/商城';

// 响应式数据
const infoList = ref([]);
const grid = ref({
  xl: 6,
  lg: 6,
  md: 12,
  sm: 12,
  xs: 24,
});

const getStatistics = async () => {
  try {
    const res = await headerApi();
    console.log(`headerApi res 👉`, res);
    infoList.value = res.data;
  } catch (error) {
    ElMessage.error(error?.msg || '获取统计数据失败');
  }
};

// 组件挂载时执行
onMounted(() => {
  getStatistics();
});
</script>

<style lang="scss" scoped>
.mb-4 {
  margin-bottom: 14px;
}

.number {
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 400;
  color: #333333;
  line-height: 40px;
}

.ml-4 {
  display: inline-block;
  margin-left: 16px !important;
}

.text-right {
  text-align: right;
}

::v-deep .el-card__header {
  border-bottom: none !important;
  padding-bottom: 0;
}

.el-divider--horizontal {
  margin: 0 0 12px 0;
}

.total {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
}
</style>